$(function() {
	ShowCharts01();
	ShowCharts02();
});

function ShowCharts01() {
	var mycharts = echarts.init(document.getElementById('TheCharts01'));
	option = {
		tooltip: {
			trigger: 'item',
			formatter: "{b}: {c} ({d}%)"
		},
		color: ['#67e0e3', '#e062ae', '#ffdb5c'],
		legend: {
			y: 'bottom',
			data: ['环境差', '秩序乱', '交通堵'],
			textStyle: {
				fontSize: '12',
				color: '#fff'
			}
		},
		series: [{
			name: '访问来源',
			type: 'pie',
			radius: ['50%', '70%'],
			avoidLabelOverlap: false,
			label: {
				normal: {
					show: false,
					position: 'center'
				},
				emphasis: {
					show: true,
					textStyle: {
						fontSize: '30',
						fontWeight: 'bold'
					}
				}
			},
			labelLine: {
				normal: {
					show: false
				}
			},
			data: [{
					value: 335,
					name: '环境差'
				},
				{
					value: 310,
					name: '秩序乱'
				},
				{
					value: 234,
					name: '交通堵'
				}
			]
		}]
	};
	mycharts.setOption(option);
}

function ShowCharts02() {
	var mycharts = echarts.init(document.getElementById('TheCharts03'));
	option = {
		tooltip: {
			trigger: 'item',
			formatter: "{b}"
		},
		calculable: true,
		series: [{
			name: '漏斗图',
			type: 'funnel',
			left: '10%',
			top: 60,
			//x2: 80,
			bottom: 60,
			width: '60%',
			// height: {totalHeight} - y - y2,
			min: 10,
			max: 3,
			minSize: '0%',
			maxSize: '100%',
			sort: 'descending',
			gap: 2,
			label: {
				normal: {
					show: true,
					position: 'inside'
				},
				emphasis: {
					textStyle: {
						fontSize: 20
					}
				}
			},
			labelLine: {
				normal: {
					length: 10,
					lineStyle: {
						width: 1,
						type: 'solid'
					}
				}
			},
			itemStyle: {
				normal: {
					borderColor: '#fff',
					borderWidth: 1
				}
			},
			data: [{
					value: 4,
					name: '七级'
				},
				{
					value: 5,
					name: '六级'
				},
				{
					value: 6,
					name: '五级'
				},
				{
					value: 7,
					name: '四级'
				},
				{
					value: 8,
					name: '三级'
				},
				{
					value: 9,
					name: '二级'
				},
				{
					value: 10,
					name: '一级'
				}
			]
		}]
	};
	mycharts.setOption(option);
}